<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    request.setAttribute("path", path);
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">
    <title>商品详情</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-2.1.0.js"></script>
</head>
<body>
<header>
    <div class="top center">
        <div class="left fl">
            <ul>
                <li><a href="http://www.mi.com/" target="_blank">书籍商城</a></li>
                <li>|</li>
                <li><a href="">shu</a></li>
                <li>|</li>
                <li><a href="">书迷聊</a></li>
                <li>|</li>
                <li><a href="">游戏</a></li>
                <li>|</li>
                <li><a href="">多看阅读</a></li>
                <li>|</li>
                <li><a href="">云服务</a></li>
                <li>|</li>
                <li><a href="">金融</a></li>
                <li>|</li>
                <li><a href="">书籍商城移动版</a></li>
                <li>|</li>
                <li><a href="">问题反馈</a></li>
                <li>|</li>
                <li><a href="">Select Region</a></li>
                <div class="clear"></div>
            </ul>
        </div>
        <div class="right fr">
            <div class="gouwuche fr"><a href="${pageContext.request.contextPath}/shop/showAllShop">购物车</a></div>
            <div class="fr">
                <ul>
                    <li><a href="${pageContext.request.contextPath}/page/liebiao.jsp" target="_blank">首页</a></li>
                    <li>|</li>
                    <li><a href="${pageContext.request.contextPath}/page/self_info.jsp" target="_blank" >个人中心</a></li>
                    <li>|</li>
                    <li><a href="${pageContext.request.contextPath}/page/dingdanzhongxin.jsp" target="_blank">我的订单</a></li>
                </ul>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</header>
<!--end header -->

<!-- start banner_x -->
<div class="banner_x center">
    <a href="./index.html" target="_blank"><div class="logo fl"></div></a>
    <a href=""><div class="ad_top fl"></div></a>
    <div class="nav fl">
        <ul>
            <li><a href="">小说</a></li>
            <li><a href="">漫画</a></li>
            <li><a href="">名著</a></li>
            <li><a href="">资料</a></li>
            <li><a href="">传记</a></li>
            <li><a href="">翻译版</a></li>
            <li><a href="">儿童读物</a></li>
            <li><a href="">服务</a></li>
            <li><a href="">社区</a></li>
        </ul>
    </div>
    <div class="search fr">
        <form action="" method="post">
            <div class="text fl">
                <input type="text" class="shuru"  placeholder="${book.bookname}">
            </div>
            <div class="submit fl">
                <input type="submit" class="sousuo" value="搜索"/>
            </div>
            <div class="clear"></div>
        </form>
        <div class="clear"></div>
    </div>
</div>
<!-- end banner_x -->


<!-- xiangqing -->
<form action="post" method="">
    <div class="xiangqing">
        <div class="neirong w">
         <%--   bookid--%>
            <input id="bookid" hidden="" value="${book.bookid}">
            <div class="xiaomi6 fl">${book.bookname}</div>
            <nav class="fr">
                <li><a href="">概述</a></li>
                <li>|</li>
                <li><a href="">便捷通道</a></li>
                <li>|</li>
                <li><a href="">用户评价</a></li>
                <div class="clear"></div>
            </nav>
            <div class="clear"></div>
        </div>
    </div>

    <div class="jieshao mt20 w">
        <div class="left fl"><img src="${book.typename}" width="550" height="500"></div>
        <div class="right fr">
            <div class="h3 ml20 mt20">${book.bookname}</div>
            <div class="jianjie mr40 ml20 mt10"></div>
            <div id="price" class="jiage ml20 mt10">${book.selling}元</div>
            <div class="ft20 ml20 mt20">选择版本</div>
            <div class="xzbb ml20 mt10">
                <div class="banben fl">
                    <a>
                        <span>彩色图画版</span>
                        <span>${book.selling}元</span>
                    </a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="ft20 ml20 mt20">选择数量</div>
            <input id="number" class="xzbb ml20 mt10" type="number" value="1" step="1" min="1" style="font-size: 22px">
        <%--    <div class="xzbb ml20 mt10">
                <div class="banben">
                    <a>
                        <span class="yuandian"></span>
                        <span class="yanse">中文</span>
                    </a>
                </div>

            </div>--%>
            <div class="xqxq mt20 ml20">
                <div class="top1 mt10">
                    <div class="left1 fl">${book.bookname} 全网同价版</div>
                    <div class="right1 fr">${book.selling}元</div>
                    <div class="clear"></div>
                </div>
                <div id="result" class="bot mt20 ft20 ftbc">总计：${book.selling}元</div>
            </div>
            <div class="xiadan ml20 mt20">
                <input class="jrgwc"  type="button" name="jrgwc" value="立即选购" />
                <input class="jrgwc" type="button" name="jrgwc" onclick="addBook()" value="加入购物车" />

            </div>
        </div>
        <div class="clear"></div>
    </div>
</form>
<!-- footer -->
<footer class="mt20 center">

    <div class="mt20">商城|MIUI|聊|多看书城|路由器|视频电话|天猫店|淘宝直营店|网盟|移动|隐私政策|Select Region</div>
    <div>©mi.com 京ICP证110507号 京ICP备10046444号 京公网安备11010802020134号 京网文[2014]0059-0009号</div>
    <div>违法和不良信息举报电话：185-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</div>

</footer>
<script type="text/javascript">
    function addBook() {
        //获取bookid
        var id = $("#bookid").val();
        //获取价格
        var price =$("#price").text().substring(2,0);
        //获取数量
        var number =$("#number").val();
        //计算总价
        var bookprice = number*price;
        $.ajax({
            type:'post'
            ,url:'${pageContext.request.contextPath}/shop/insertShop'//请求路径
            ,data:{
                'bookid':id,
                'price':price,
                'bookcount':number,
                'bookprice':bookprice
            }
            ,dataType:'json'
            ,success:function (data) {
                if(data.code==1){
                    alert("添加成功");
                }else {
                    alert("请先登录！")
                    
                }

            }
        })
    }
    $("#number").change(function () {
        //alert("ggggggggggggggggg");
        //获取价格
        var price =$("#price").text().substring(2,0);
        //alert(price);
        //获取数量
        var number =$("#number").val();
        //alert(number);
        //计算总价
        var bookprice = number*price;
        //alert(bookprice);
        //将总价返回到总价result中
        result.innerText ="总计："+ bookprice+"元";
    })

</script>
</body>
</html>
